<%@ page language="java" contentType="text/html;charset=UTF-8"
    pageEncoding="UTF-8"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)"/>
    <meta name="page-view-size" content="1280*720"/>
    <title>ITV行业定制集成演示平台</title>
    <style type="text/css">
		body {margin:0; padding:0; width:1280px; height:720px; background-color:transparent;}
		input{
		    outline-color: invert ;
			outline-style: none ;
			outline-width: 0px ;
			border: none ;
			border-style: none ;
			text-shadow: none ;
			-webkit-appearance: none ;
			-webkit-user-select: text ;
			outline-color: transparent ;
			box-shadow: none;
		}
		a{
			outline-style: none ;
		}
	</style>
<%@include file="commons_category.jsp" %>
<%
	
	String pageNo=request.getParameter("pageNo");
	String focusId=request.getParameter("focusId");
	if(pageNo==null){
		pageNo="0";
	}
	
%>

</head>
<body>

 	<div id="bg" style="position:absolute; left:0px;top:0px;" ><img width="1280" height="720" src="images/bg_index.png"/></div> 
	
	<img style="position:absolute;left:820px; top:30px;width:270px;height:75px;" src="images/search.png">
	<img id="searchPlatform" style="position:absolute;left:820px; top:30px;width:272px;height:77px;z-index:8;display:none;" src="images/search_focus.png">
	<input id="modelName" type="text" value="请输入首字母" style="position:absolute;left:900px; top:54px;width:146px;height:25px;z-index:9;line-height:25px;font-size:18px;background-color:transparent; color:#ffffff; text-align:center;" onFocus="javascript:searchBtnFocus('searchPlatform');" onBlur="javascript:searchUnBtnFocus('searchPlatform');" oninput="javascript:searchModel();"/>
	
	
	<div id="now_time" style="position:absolute; left:1093px; top:37px; width:99px; height:35px; line-height:35px; font-size:35px; color:#ffffff; text-align:center; "></div>
 	<div id="now_day" style="position:absolute; left:1093px; top:74px; width:101px; height:18px; line-height:18px; font-size:18px; color:#ffffff; text-align:center; "></div>
 	<div id="now_week" style="position:absolute; left:1203px; top:74px; width:55px; height:18px; line-height:18px; font-size:18px; color:#ffffff; text-align:center; "></div>
	
	<div id="list">
	   	
	</div>
	
	<div style="position:absolute;left:124px; top:590px;width:750px; height:85px; line-height:85px; font-size:40px; text-align:center; color:#ffffff; " >
    	为了更好的浏览效果，请横屏使用
   	</div>
	
	<img style="position:absolute;left:863px; top:602px;width:157px;height:75px;" src="images/pre_page.png">
	<a id="prepage" style="position:absolute;left:857px; top:602px;width:168px;height:75px;z-index:9;" onFocus="javascript:btnFocus(this.id,'images/pre_page_focus.png');" onBlur="javascript:unbtnFocus(this.id,'images/dot.gif');" href="javascript:prepage();"><img width="168" height="75" src="images/dot.gif"/></a>
	
	<div id="playPage" style="position:absolute; left:1025px; top:629px;width:40px; height:26px; line-height:26px; font-size:26px; text-align:center; color:#f66b0e; " >
    	1/1
   	</div>
   	
   	<img style="position:absolute;left:1071px; top:602px;width:157px;height:75px" src="images/next_page.png">
   	<a id="nextpage" style="position:absolute;left:1065px; top:602px;width:168px;height:75px;z-index:9;" onFocus="javascript:btnFocus(this.id,'images/next_page_focus.png');" onBlur="javascript:unbtnFocus(this.id,'images/dot.gif');" href="javascript:nextpage();"><img width="168" height="75" src="images/dot.gif"/></a>
	
	<div style="position:absolute; left:79px; top:679px; width:1135px; height:24px; line-height:24px; font-size:24px; color:#ffffff; text-align:center; ">
		<marquee id="scroll_text" behavior="scroll" direction="left" scrollamount="5"></marquee>
	</div>

</body>
<script type="text/javascript" src="js/catalog.js"></script>
<script type="text/javascript" src="js/content_<%=CategoryUtils.Demonstration_Platform%>.js"></script>
<script type="text/javascript" src="js/message.js"></script>
<script type="text/javascript">
	var relativePathPrefix="../../../../";
	var filepath = '<%=CategoryUtils.FILE_PATH%>';
	var catalogCount=0;
	var ipageCount = 0; //总页码
	var ipageSize = 10; //单页面信息条数 
	var infos = "";
	var pageIndex=0;
	
	//搜索状态
	var searchStatus=0;
	var ipageSize1 = 8; //单页面信息条数 
	
	var pageNo = "<%=pageNo%>";
	pageNo=parseInt(pageNo);
	var focusId_="<%=focusId%>";
	var focusId="<%=focusId%>";
	var returnFlag=true;
	
	window.onload=function(){
		//时间
		setTime();
		//滚动条
		getMessageData();
		//读取目录数量
		getIntroduceCategoryList();
	};
	function getMessageData(){
		var json = data_<%=CategoryUtils.RECOMMEND_ROLL_MESSAGE%>;
		if(json&&json[0]){
			if(json[0].f_cc_desc){
				document.getElementById("scroll_text").innerHTML=(json[0].f_cc_desc?json[0].f_cc_desc.replace(/<[^>]+>/g,""):"").replace(/(_ueditor_page_break_tag_)/g,"");	
			}else{
				document.getElementById("scroll_text").innerHTML="ITV行业定制集成演示平台欢迎您！";
			}
		}else{
			document.getElementById("scroll_text").innerHTML="ITV行业定制集成演示平台欢迎您！";
		}
	}
	function getIntroduceCategoryList(){
		var json = data_catalog;
		if(json){
			catalogCount = json.length;
	  		ipageCount = Math.ceil(catalogCount / ipageSize);
			
	  		infos= json;
			initPage(pageNo);
		}else{
			document.getElementById("modelName").focus();
		}
	}
	function getSearchContentList(paramJson){
		var json = paramJson;
		if(json){
			contentCount = json.length;
	  		ipageCount = Math.ceil(contentCount / ipageSize1);
			infos= json;
			pageIndex=0;
			initContentPage(pageIndex);
		}else{
			document.getElementById("modelName").focus();
		}
		
	}
	
	//初始化分类列表
    function initPage(pageIndex) {
		
		pageNo=pageIndex;
		document.getElementById("playPage").innerHTML="";
		if(infos.length>0){
			document.getElementById("playPage").innerHTML=(pageIndex+1)+"/"+ipageCount;
		}
		
		var listcontent='';
		var obj = document.getElementById("list");
		obj.innerHTML="";
		
		var left1=0;
		var left2=0;
		var picMap = {};
		for (i = 0; i < ipageSize; i++) {
	        if (pageIndex * ipageSize + i < infos.length) {
	        	left1 = 84+(i%5*226);
	        	left2 = 124+(i%5*226);
	        	
	        	var cprIdStr=infos[pageIndex * ipageSize + i].f_cp_cprid;
	    		var cprIdArry=cprIdStr.split(",");
	        	var imgUrlStr=infos[pageIndex * ipageSize + i].f_cp_url;
	    		var imgUrlArry=imgUrlStr.split(",");
	    		
	    		if(cprIdArry[0]){
	    			picMap[cprIdArry[0]] = filepath+imgUrlArry[0].replace("PIC/imgs/","");
	    		}
	    		if(cprIdArry[1]){
	    			picMap[cprIdArry[1]] = filepath+imgUrlArry[1].replace("PIC/imgs/","");
	    		}
	    		if(cprIdArry[2]){
	    			picMap[cprIdArry[2]] = filepath+imgUrlArry[2].replace("PIC/imgs/","");
	    		}
	    		
	    		if(i<5){
	    			listcontent+="<img style='position:absolute;left:"+left2+"px;top:157px;width:137px;height:195px;' src='"+picMap['30']+"'/>";
	    			listcontent+="<a id='platform_view_"+i+"' style='position:absolute;left:"+left1+"px;top:115px;width:207px;height:208px;z-index:9;' onFocus=\"javascript:btnFocus(this.id,'"+picMap['32']+"');\" onBlur=\"javascript:unbtnFocus(this.id,'images/dot.gif');\" href=\"javascript:goPlatformView('"+infos[pageIndex * ipageSize + i].f_catalog_id+"','"+picMap['31']+"');\"><img width='207' height='208' src='images/dot.gif'/></a>";
	    		}else{
	    			listcontent+="<img style='position:absolute;left:"+left2+"px;top:395px;width:137px;height:195px;' src='"+picMap['30']+"'/>";
	    			listcontent+="<a id='platform_view_"+i+"' style='position:absolute;left:"+left1+"px;top:354px;width:207px;height:208px;z-index:9;' onFocus=\"javascript:btnFocus(this.id,'"+picMap['32']+"');\" onBlur=\"javascript:unbtnFocus(this.id,'images/dot.gif');\" href=\"javascript:goPlatformView('"+infos[pageIndex * ipageSize + i].f_catalog_id+"','"+picMap['31']+"');\"><img width='207' height='208' src='images/dot.gif'/></a>";
	    		}
	    		
	       }
	    }
		obj.innerHTML=listcontent;
		
		if(returnFlag){
			if(document.getElementById(focusId_)){
				setTimeout(function(){
					document.getElementById(focusId_).focus();
				},1000);
		
			}else{
				if(document.getElementById("platform_view_0")){
					document.getElementById("platform_view_0").focus();
				}else{
					document.getElementById("modelName").focus();
				}
			}
			returnFlag=false;
		}
		
    }
	
	//初始化节目列表
    function initContentPage(pageIndex) {
		
		document.getElementById("playPage").innerHTML="";
		if(infos.length>0){
			document.getElementById("playPage").innerHTML=(pageIndex+1)+"/"+ipageCount;
		}
		
		var listcontent='';
		var obj = document.getElementById("list");
		obj.innerHTML="";
		
		var left1=0;
		var left2=0;
		var left3=0;
		var left4=0;
		for (i = 0; i < ipageSize1; i++) {
	        if (pageIndex * ipageSize1 + i < infos.length) {
	        	left1 = 16+(i%4*300);
	        	left2 = 44+(i%4*300);
	        	left3 = 55+(i%4*300);
	        	left4 = 68+(i%4*300);
	        	
	    		var imgURL=filepath+infos[pageIndex * ipageSize1 + i].f_cc_picurl.replace("PIC/imgs/","");
	    		
	    		if(i<4){
	    			listcontent+="<img style='position:absolute;left:"+left2+"px;top:130px;width:316px;height:193px;' src='images/shadow.png'/>";
 	    			listcontent+="<img style='position:absolute;left:"+left3+"px;top:139px;width:282px;height:159px;z-index:7;' src='"+imgURL+"'/>";
 	    			listcontent+="<img id='img_platform_jump_"+i+"' style='position:absolute;left:"+left2+"px;top:133px;width:305px;height:172px;z-index:8;display:none;' src='"+imgURL+"'/>";
 	    			listcontent+="<img id='a_platform_jump_"+i+"' style='position:absolute;left:"+left1+"px;top:105px;width:361px;height:228px;z-index:9;display:none;' src='images/btn_platform_focus.png'/>";
 	    			listcontent+="<a id='platform_jump_"+i+"' style='position:absolute;left:"+left3+"px;top:139px;width:282px;height:159px;z-index:9;' onFocus=\"javascript:platformJumpBtnFocus(this.id,'images/btn_platform_focus.png');\" onBlur=\"javascript:platformJumpUnBtnFocus(this.id,'images/dot.gif');\" href='dispatcher.jsp?imgURL="+imgURL+"'><img width='282' height='159' src='images/dot.gif'/></a>";
	    			listcontent+="<div style='position:absolute; left:"+left4+"px; top:319px; width:257px; height:27px; line-height:27px; font-size:25px; color:#ffffff; text-align:center; '>"+infos[pageIndex * ipageSize1 + i].f_cc_name+"</div>";
	    		}else{
	    			listcontent+="<img style='position:absolute;left:"+left2+"px;top:366px;width:316px;height:193px;' src='images/shadow.png'/>";
 	    			listcontent+="<img style='position:absolute;left:"+left3+"px;top:375px;width:282px;height:159px;z-index:7;' src='"+imgURL+"'/>";
 	    			listcontent+="<img id='img_platform_jump_"+i+"' style='position:absolute;left:"+left2+"px;top:368px;width:305px;height:172px;z-index:8;display:none;' src='"+imgURL+"'/>";
 	    			listcontent+="<img id='a_platform_jump_"+i+"' style='position:absolute;left:"+left1+"px;top:340px;width:361px;height:228px;z-index:9;display:none;' src='images/btn_platform_focus.png'/>";
					listcontent+="<a id='platform_jump_"+i+"' style='position:absolute;left:"+left3+"px;top:375px;width:282px;height:159px;z-index:9;' onFocus=\"javascript:platformJumpBtnFocus(this.id,'images/btn_platform_focus.png');\" onBlur=\"javascript:platformJumpUnBtnFocus(this.id,'images/dot.gif');\" href='dispatcher.jsp?imgURL="+imgURL+"'><img width='282' height='159' src='images/dot.gif'/></a>";
	    			listcontent+="<div style='position:absolute; left:"+left4+"px; top:555px; width:257px; height:27px; line-height:27px; font-size:25px; color:#ffffff; text-align:center; '>"+infos[pageIndex * ipageSize1 + i].f_cc_name+"</div>";
	    		}
	    		
	       }
	    }
		obj.innerHTML=listcontent;
		
    }
	
	//前一页
	function prepage() {
		if(searchStatus==0){
			//判断总数是否大于单页显示条数
		    if (catalogCount > ipageSize) {
		    	//如果总数大于单页显示的条数，说明有多页
		        if (pageNo > 0) {
		        	pageNo--;
		            initPage(pageNo);
		        }else{
		        	pageNo = ipageCount - 1;
		        	initPage(pageNo);
		        }
		        
		    }
		}else{
			//判断总数是否大于单页显示条数
		    if (contentCount > ipageSize1) {
		    	//如果总数大于单页显示的条数，说明有多页
		        if (pageIndex > 0) {
		        	pageIndex--;
		        	initContentPage(pageIndex);
		        }else{
		        	pageIndex = ipageCount - 1;
		        	initContentPage(pageIndex);
		        }
		        
		    }
		}
		
	}
	
	//下一页
	function nextpage() {
		if(searchStatus==0){
			//判断总数是否大于单页显示条数
		    if (catalogCount > ipageSize) {
		    	
		    	//如果总数大于单页显示的条数，说明有多页
		        if (pageNo < ipageCount - 1) {
		        	pageNo++;
		            initPage(pageNo); 
		        }else{
		        	pageNo = 0;
		        	initPage(pageNo);
		        }
		        
		    }
		}else{
			//判断总数是否大于单页显示条数
		    if (contentCount > ipageSize1) {
		    	//如果总数大于单页显示的条数，说明有多页
		        if (pageIndex < ipageCount - 1) {
		        	pageIndex++;
		        	initContentPage(pageIndex); 
		        }else{
		        	pageIndex = 0;
		        	initContentPage(pageIndex);
		        }
		        
		    }
		}
		
	}

	function btnFocus(id, pic){
		focusId=id;
		document.getElementById(id).childNodes[0].src=pic;
	}
	function unbtnFocus(id,pic){
		document.getElementById(id).childNodes[0].src=pic;
	}
	
	function searchBtnFocus(id){
		if(document.getElementById("modelName").value=='请输入首字母'){
			document.getElementById("modelName").value='';
		}
		document.getElementById(id).style.display="";
	}
	function searchUnBtnFocus(id){
		if(document.getElementById("modelName").value==''){
			document.getElementById("modelName").value='请输入首字母';
		}
		document.getElementById(id).style.display="none";
	}
	
	function platformJumpBtnFocus(id,pic){
		document.getElementById("img_"+id).style.display="";
		document.getElementById("a_"+id).style.display="";
	}
	function platformJumpUnBtnFocus(id,pic){
		document.getElementById("img_"+id).style.display="none";
		document.getElementById("a_"+id).style.display="none";
	}
	
	function searchModel(){
		if(document.getElementById("modelName").value==''){
			searchStatus=0;
			//读取目录数量
			getIntroduceCategoryList();
		}else{
			searchStatus=1;
			var paramJson=[];
			var json = data_<%=CategoryUtils.Demonstration_Platform%>;
			for (i = 0; i < json.length; i++) {
				if(json[i].f_cc_searchname.indexOf(document.getElementById("modelName").value)!=-1){
					paramJson.push(json[i]);
				}
			}
			//读取搜索到的节目数量
			getSearchContentList(paramJson);
		}
	}
	
	function goPlatformView(f_catalog_id,f_cp_url){
		if(f_catalog_id==<%=CategoryUtils.Smart_Rural_Areas%>){
			window.location.href="countryside_view.jsp?f_catalog_id="+f_catalog_id+"&f_cp_url="+f_cp_url+"&pageNo="+pageNo+"&focusId="+focusId;
		}else{
			window.location.href="platform_view.jsp?f_catalog_id="+f_catalog_id+"&f_cp_url="+f_cp_url+"&pageNo="+pageNo+"&focusId="+focusId;
		}
	}
	
	function setTime(){
		/*日期*/
		var date=new Date();
		var mon=date.getMonth()+1;
		if(mon<10){
			mon="0"+mon;
		}
		var datestr=date.getFullYear()+"-"+mon+"-"+date.getDate();
		var arr1=new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
		var week=arr1[date.getDay()];
		var h=date.getHours();
		if(h<10){
			h="0"+h;
		}
		var mi=date.getMinutes();
		if(mi<10){
			mi="0"+mi;
		}
		var time=h+":"+mi;
		document.getElementById("now_time").innerHTML=time;
		document.getElementById("now_day").innerHTML=datestr;
		document.getElementById("now_week").innerHTML=week;
		setTimeout(function(){
			setTime();
		},30*1000);
	}

</script>
</html>